<template>
  <jd-header title="北京理工大学国防科技园2号楼10层"></jd-header>
  <!-- 搜索框 -->
  <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" />
  <!-- 轮播图 -->
  <van-swipe :autoplay="3000" lazy-render :show-indicators="false" class="lb">
    <van-swipe-item v-for="image in images" :key="image" class="mylb">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
  <!-- 九宫格 -->
  <van-grid square :column-num="5">
    <van-grid-item
      v-for="value in grids"
      :key="value"
      :icon="value.img"
      :text="value.text"
    />
  </van-grid>
  <!-- card卡片 -->
  <div class="card">
    <h2>附近店铺</h2>
    <van-card
      v-for="item in nearbyList"
      :key="item._id"
      :thumb-link="`http://localhost:8080/#/shop/${item._id}`"
      :desc="`月售${item.sales}&nbsp&nbsp&nbsp&nbsp&nbsp起送${item.expressLimit}元&nbsp&nbsp&nbsp基础运费￥${item.expressPrice}`"
      :title="`${item.name}`"
      :price="`${item.slogan}`"
      currency=""
      :thumb="`${item.imgUrl}`"
    >
    </van-card>
  </div>

  <jd-footer></jd-footer>
</template>

<script>
import { ref } from "vue";
import { get } from "../../utils/request";
import JdHeader from "@/components/header/Header.vue";
import JdFooter from "@/components/footer/Footer.vue";
import img1 from "@/assets/img/超市.png";
import img2 from "@/assets/img/菜市场.png";
import img3 from "@/assets/img/水果店.png";
import img4 from "@/assets/img/鲜花.png";
import img5 from "@/assets/img/医药健康.png";
import img6 from "@/assets/img/家居.png";
import img7 from "@/assets/img/蛋糕.png";
import img8 from "@/assets/img/签到.png";
import img9 from "@/assets/img/大牌免运.png";
import img10 from "@/assets/img/红包.png";
import lb_img1 from "@/assets/img/lb1.jpg";
import lb_img2 from "@/assets/img/lb2.jpg";
import lb_img3 from "@/assets/img/lb3.jpg";
import lb_img4 from "@/assets/img/lb4.jpg";

const useNearbyListEffect = () => {
  const nearbyList = ref([]);
  const getNearbyList = async () => {
    const result = await get("/api/shop/hot-list");
    if (result?.errno === 0 && result?.data?.length) {
      nearbyList.value = result.data;
      console.log(result.data);
    }
  };
  return { nearbyList, getNearbyList };
};
export default {
  name: "Home",
  components: {
    JdHeader,
    JdFooter,
  },
  setup() {
    const value = ref("");
    const images = [lb_img1, lb_img2, lb_img3, lb_img4];
    const grids = [
      { img: img1, text: "超市便利" },
      { img: img2, text: "菜市场" },
      { img: img3, text: "水果店" },
      { img: img4, text: "鲜花绿植" },
      { img: img5, text: "医药健康" },
      { img: img6, text: "家居时尚" },
      { img: img7, text: "烘培蛋糕" },
      { img: img8, text: "签到" },
      { img: img9, text: "大牌免运" },
      { img: img10, text: "红包套餐" },
    ];
    const { nearbyList, getNearbyList } = useNearbyListEffect();
    getNearbyList();
    return { value, images, grids, nearbyList };
  },
};
</script>

<style lang="less" scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.lb {
  background: #ffffff;
  .mylb {
    width: 339px !important;
    height: 86px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
}

.card {
  background: #f7f8fa;
  margin-top: 10px;
  text-align: left;
  h2 {
    padding-top: 10px;
    padding-left: 20px;
    text-align: left;
  }
  /deep/.van-card__header {
    align-items: center;
  }
  /deep/.van-card__thumb {
    width: 56px !important;
    height: 56px !important;
  }
  /deep/.van-card__content {
    justify-content: center;
    margin-left: 8px;
  }
  /deep/.van-card__price-integer {
    font-size: 13px;
    color: #e93b3b;
  }
  /deep/.van-card__desc {
    font-size: 13px;
    color: #333333;
    margin: 7px 0;
  }
  /deep/.van-card__title {
    font-size: 16px;
  }
}
</style>